<template>
  <div class="livelihood-detail-content">
    <Navbar title="民生事件" />
    
    <div class="content">
      <div class="top">
        <label>{{detailData.sjfl}}</label>
        <p class="title">{{detailData.zdgzgdbt}}</p>
        <div class="info">
          <p>提报时间：{{detailData.lrsj}}</p>
          <p>办结时限：{{detailData.bjsx}}</p>
        </div>
        <p class="desc">{{detailData.zynr}}</p>
      </div>

      <div class="bottom">
        <p class="icon-huifu flex-center">回复</p>
        <div class="module-wrap desc">
          <p v-if="detailData.bmhfnr">{{detailData.bmhfnr}}</p>
          <p v-else class="no-data">暂无回复</p>
        </div>
        <p class="title">满意程度</p>
        <div class="module-wrap flex-between">
          <div 
            class="flex-center flex-column" 
            v-for="(item,index) in manyiduList" 
            :key="index" 
            :class="['div-manyidu'+item.id,item.id==mydVal(detailData.dfldrqk)?'active':'']">
            <div class="icon-manyidu"></div>
            <p class="p-manyidu">{{item.name}}</p>
          </div>
        </div>
      </div>

    </div>
    
    <!-- <div class="op-btn-wrap">
      <div class="btn" @click="handleContact">联系责任人</div>
    </div> -->
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, reactive, toRefs, watch, onActivated, getCurrentInstance } from 'vue'
import Navbar from '@/components/Navbar/index.vue'
import { useRoute } from 'vue-router'
import { useContactStore } from '@/store'

defineOptions({
  name: 'LivelihoodDetail'
})

const route = useRoute()
const detailData = ref(route.query)

const manyiduList = ref([
  {name: "非常不满意", id: 1},
  {name: "不满意", id: 2},
  {name: "基本满意", id: 3},
  {name: "比较满意", id: 4},
  {name: "非常满意", id: 5},
])

const mydVal = (val: string) => {
  let idVal = ""
  switch(val){
    case '非常不满意':
    case '很不满意':
    case '十分不满意':
    case '相当不满意':
    case '太不满意':
    case '特别不满意':
      idVal = 1;
      break;
    case '不满意':
      idVal = 2;
      break;
    case '满意':
    case '基本满意':
    case '满意满意':
      idVal = 3;
      break;
    case '比较满意':
      idVal = 4;
      break;
    case '非常满意':
    case '很满意':
    case '十分常满意':
    case '相当满意':
    case '特别满意':
      idVal =5;
      break;
  }
  return idVal
}

const contactStore = useContactStore()
const handleContact = (ids: any) =>{
  contactStore.fetchUserDetail(detailData.value.userId)
}

</script>

<script lang="ts">

</script>

<style lang="less" scoped>
.livelihood-detail-content{
  .content{
    padding: 0 0 110px;
    overflow: auto;
    height: 100vh;
    overflow-y: scroll;
    box-sizing: border-box;
    color: #000000;
    font-size: 15px;
    line-height: 26px;
  }
  .module-wrap{
    background: #fff;
    border-radius: 8px;
    padding: 15px 17px;
  }
  .top{
    background: #fff;
    padding: 14px;
    .title{
      font-weight: bold;
      font-size: 17px;
      padding: 6px 0 9px;
      line-height: 22px;
    }
    label{
      display: inline-block;
      border-radius: 3px;
      background: #FF621119;
      color: #FF6211;
      font-weight: bold;
      font-size: 13px;
      padding: 0 12px;
      height: 24px;
      line-height: 24px;
    }
    .info{
      color: #666;
      font-size: 13px;
      line-height: 20px;
      p{
        margin-bottom: 5px;
      }
    }
  }
  .bottom{
    padding: 12px;
    .icon-huifu{
      width: 54px;
      height: 27px;
      border-radius: 12px 12px 0px 12px;
      background: linear-gradient(0deg, #2B7FF0 0%, #3C8EFD 100%);
      color: #FFFFFF;
      font-weight: bold;
      font-size: 15px;
      margin-bottom: 6px;
    }
    .title{
      color: #3A75C5;
      font-weight: bold;
      font-size: 16px;
      margin: 20px 0 8px;
    }
    .icon-manyidu{
      width: 43px;
      height: 43px;
      background: url("@/assets/event/icon-manyidu1.png") no-repeat center center;
      background-size: 43px 43px;
    }
    .p-manyidu{
      color: #0000007F;
      font-size: 12px;
      line-height: 14px;
      margin-top: 5px;
    }
    @List: 1,2,3,4,5;
    .for(@counter) when (@counter < length(@List)+1) {
      .div-manyidu@{counter} {
        .icon-manyidu{
          width: 43px;
          height: 43px;
          background: url("@/assets/event/icon-manyidu@{counter}.png") no-repeat center center;
          background-size: 43px 43px;
        }
        &.active{
          .icon-manyidu{
            background-image: url("@/assets/event/icon-manyidu@{counter}-active.png");
          }
          .p-manyidu{
            color: #000;
          }
        }
      }
      .for(@counter+1)
    }

    .for(1)
  }
  .no-data{
    padding: 20px 0;
    text-align: center;
    color: #999;
  }
  .op-btn-wrap{
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
    .btn {
      border-radius: 22px;
      height: 44px;
      width: 320px;
      margin: 8px auto;
      text-align: center;
      line-height: 44px;
      background: #3a75c5;
      color: #ffffff;
      font-size: 16px;
    }
  }
}
</style>
